<template>
    <div class="user-layout">
        <UserBackgroundImg></UserBackgroundImg>
        <UserDetails></UserDetails>
        <div class="container dir-top-nowrap box">
            <div class="dir-left-nowrap gap">
                <div class="box-grow-0">
                    <div class="nav">
                        <template v-for="menu in menus" :key="menu.name">
                            <NuxtLink :to="{ name: menu.urlName, params: $route.params }" class="m-m-b"
                                :class="[{ 'active': props.activeMenuName === menu.name }]">
                                <img class="m-m-l-img icon" :src="menu.icon">
                                <img class="m-m-l-img iconActive" :src="menu.iconActive">
                                <span class="m-m-t">{{ menu.title }}</span>
                                <AppIcon class="m-m-r-img" icon="Right" size="15"></AppIcon>
                            </NuxtLink>
                        </template>
                    </div>
                </div>
                <div class="box-grow-1 dir-top-nowrap">
                    <slot></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="UserLayout">
import { UserBackgroundImg, UserDetails } from '#components';

type MenuName = 'index' | 'article' | 'follow' | 'fans' | 'favlist' | 'setting'
type Menu = {
    title: string
    name: MenuName
    urlName: string
    icon: string
    iconActive: string
}
const props = withDefaults(defineProps<{
    /**选中的菜单 */
    activeMenuName?: MenuName
}>(), {})

const userId = useAppRouteParams<string>('userId')

const menus: Menu[] = [
    {
        title: '基本信息',
        name: 'index',
        urlName: 'user-userId',
        icon: '/imgs/user/nav_info.png',
        iconActive: '/imgs/user/nav_info_on.png',
    },
    {
        title: '作品信息',
        name: 'article',
        urlName: 'user-userId-article-cos',
        icon: '/imgs/user/nav_article.png',
        iconActive: '/imgs/user/nav_article_on.png',
    },
    {
        title: '关注',
        name: 'follow',
        urlName: 'user-userId-follow',
        icon: '/imgs/user/nav_follow.png',
        iconActive: '/imgs/user/nav_follow_on.png',
    },
    {
        title: '粉丝',
        name: 'fans',
        urlName: 'user-userId-fans',
        icon: '/imgs/user/nav_fans.png',
        iconActive: '/imgs/user/nav_fans_on.png',
    },
    {
        title: '收藏',
        name: 'favlist',
        urlName: 'user-userId-favlist',
        icon: '/imgs/user/nav_favlist.png',
        iconActive: '/imgs/user/nav_favlist_on.png',
    },
    {
        title: '设置',
        name: 'setting',
        urlName: 'user-userId-setting',
        icon: '/imgs/user/nav_setting.png',
        iconActive: '/imgs/user/nav_setting_on.png',
    }
]


</script>

<style lang='scss' scoped>
.user-layout {
    .box {
        margin-top: 20px;
    }

    .nav {
        border-radius: 6px;
        overflow: hidden;
        background-color: #fff;
        padding: 20px 10px;

        .m-m-t-a {
            color: #fff !important;
        }

        .m-m-b {
            width: 190px;
            height: 40px;
            background: #fff;
            border-radius: 6px;
            transition: all 0.15s;
            display: flex;
            margin-bottom: 10px;

            &.active {
                background: #f9688f;

                .m-m-l-img {

                    &.icon {
                        display: none;
                    }

                    &.iconActive {
                        display: block;
                    }
                }

                .m-m-t,
                .m-m-r-img {
                    color: #fff;
                }

            }

            &:last-child {
                margin-bottom: 0;
            }

            .m-m-l-img {
                width: 20px;
                height: 20px;
                margin: auto 8px auto 14px;

                &.iconActive {
                    display: none;
                }
            }

            .m-m-t {
                font-size: 14px;
                user-select: none;
                color: #333333;
                transition: all 0.15s;
                margin: auto 0 auto 0;
            }

            .m-m-r-img {
                width: 15px;
                height: 15px;
                margin: auto 20px auto auto;
                color: #f9688f;
            }
        }
    }
}
</style>
